<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
    <!-- filter 条件查询 -->
    <!-- <div class="filter-container">
        <el-input
            @keyup.enter.native="getData"
            clearable
            style="width: 150px;margin-right:15px;"
            v-model="param.sectionNo"
            placeholder="请输入工段编号"
        ></el-input>

        <el-input
            @keyup.enter.native="getData"
            clearable
            style="width: 150px;margin-right:15px;"
            v-model="param.lineType"
            placeholder="请输入线体"
        ></el-input>

        <el-button type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
        <el-button
            type="button"
            v-waves
            class="el-button el-button--warning"
            @click="cancelSubmit"
        >
        重置</el-button>

    </div> -->

    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%;margin-top:15px;">
      <!-- <el-table-column  label="序号" type="index" align="center" width="80px"/> -->
      <el-table-column label="工段编号"  prop="sectionNo" align="center"/>
      <el-table-column label="线体"  prop="lineType" align="center"/>
      <el-table-column label="零件类型"  prop="componentType" align="center" width="130"/>
      <el-table-column label="工件宽度"  prop="workWidth" align="center"/>
      <el-table-column label="工件高度"  prop="workHeigh" align="center"/>
      <!-- <el-table-column label="机台号"  prop="machineId" align="center">
        <template slot-scope="scope">
          <div class="fx">
            {{
              scope.row.machineId
                ? scope.row.machineId
                : "-"
            }}
           </div>
        </template>
      </el-table-column> -->
      <el-table-column label="粉枪参数程序"  prop="powderGun" align="center" width="100"/>
      <el-table-column label="出粉量"  prop="powderOutput" align="center"/>
      <el-table-column label="总气量"  prop="totalGas" align="center"/>
      <el-table-column label="电压"  prop="voltage" align="center"/>
      <el-table-column label="电流"  prop="current" align="center"/>
      <el-table-column label="线速"  prop="wireSpeed" align="center"/>
      <el-table-column label="烘烤温度"  prop="bake" align="center"/>
      <el-table-column label="保温时长" prop="soakingTime" align="center"/>
      <el-table-column label="喷枪-工件距离" prop="workDistance" align="center" width="100"/>
      <el-table-column label="往复机行程高度" prop="machineHeight" align="center" width="110"/>
      <el-table-column label="往复机上下速率" prop="machineSpeed" align="center" width="110"/>
      <el-table-column label="A面" prop="sprayGunA" align="center"/>
      <el-table-column label="B面" prop="sprayGunB" align="center"/>
      <el-table-column label="C面" prop="sprayGunC" align="center"/>
      <el-table-column label="创建者" prop="createUser" align="center"/>
      <el-table-column label="创建时间" prop="createTime" align="center" width="140"/>
      <el-table-column label="修改者" prop="updateUser" align="center"/>
      <el-table-column label="修改时间" prop="updateTime" align="center" width="140"/>
      <el-table-column  label="操作" align="center" width="160" fixed="right" v-if="userInfo.roleId != 37">
        <template slot-scope="scope" >
                <el-button size="mini" type="primary" @click="handleEdict(scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

    <el-button style="margin-right: 10px" type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>
    <el-button type="success" size="small" @click="getExcelList">下载Excel模板</el-button>
    <el-divider></el-divider>

    <!-- 上传Excel表单 -->
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="baseURL+'/back/sprayParameter/sprayParameterExcel'"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :on-error="handleError"
        :headers="httpHeader"
        :file-list="fileList"
        :show-file-list="showfilelist"
        :auto-upload="false"
        v-if="userInfo.roleId != 37">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" :loading="uploadLoading">{{uploadTip}}</el-button>
        <div slot="tip" class="el-upload__tip">将Excel表单从此处上传到服务器</div>
      </el-upload>


          <!-- 修改喷涂参数设置 -->
    <el-dialog title="喷涂参数设置" :visible.sync="dialogFormVisible" width="700px">
    <el-row :gutter="10">
    <el-form :inline="true" :model="modifyform">
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="工段编号" :label-width="formLabelWidth">
                <el-input v-model="modifyform.sectionNo" style="width:200px"/>
            </el-form-item>
            <el-form-item label="工件宽度" :label-width="formLabelWidth">
                <el-input v-model="modifyform.workWidth" style="width:200px"/>
            </el-form-item>
            <el-form-item label="出粉量" :label-width="formLabelWidth">
                <el-input v-model="modifyform.powderOutput" style="width:200px"/>
            </el-form-item>
            <el-form-item label="电流" :label-width="formLabelWidth">
                <el-input v-model="modifyform.current" style="width:200px"/>
            </el-form-item>
            <el-form-item label="保温时长" :label-width="formLabelWidth">
                <el-input v-model="modifyform.soakingTime" style="width:200px"/>
            </el-form-item>
            <el-form-item label="往复机上下速率" :label-width="formLabelWidth">
                <el-input v-model="modifyform.machineSpeed" style="width:200px"/>
            </el-form-item>
            <el-form-item label="C面" :label-width="formLabelWidth">
                <el-input v-model="modifyform.sprayGunC" style="width:200px"/>
            </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="线体" :label-width="formLabelWidth">
                <el-input v-model="modifyform.lineType" style="width:200px"/>
            </el-form-item>
            <el-form-item label="工件高度" :label-width="formLabelWidth">
                <el-input v-model="modifyform.workHeigh" style="width:200px"/>
            </el-form-item>
            <el-form-item label="总气量" :label-width="formLabelWidth">
                <el-input v-model="modifyform.totalGas" style="width:200px"/>
            </el-form-item>
            <el-form-item label="线速" :label-width="formLabelWidth">
                <el-input v-model="modifyform.wireSpeed" style="width:200px"/>
            </el-form-item>
            <el-form-item label="喷枪-工件距离" :label-width="formLabelWidth">
                <el-input v-model="modifyform.workDistance" style="width:200px"/>
            </el-form-item>
            <el-form-item label="A面" :label-width="formLabelWidth">
                <el-input v-model="modifyform.sprayGunA" style="width:200px"/>
            </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="零件类型" :label-width="formLabelWidth">
                <el-input v-model="modifyform.componentType" style="width:200px"/>
            </el-form-item>
            <el-form-item label="粉枪参数程序" :label-width="formLabelWidth">
                <el-input v-model="modifyform.powderGun" style="width:200px"/>
            </el-form-item>
            <el-form-item label="电压" :label-width="formLabelWidth">
                <el-input v-model="modifyform.voltage" style="width:200px"/>
            </el-form-item>
            <el-form-item label="烘烤温度" :label-width="formLabelWidth">
                <el-input v-model="modifyform.bake" style="width:200px"/>
            </el-form-item>
            <el-form-item label="往复机行程高度" :label-width="formLabelWidth">
                <el-input v-model="modifyform.machineHeight" style="width:200px"/>
            </el-form-item>
            <el-form-item label="B面" :label-width="formLabelWidth">
                <el-input v-model="modifyform.sprayGunB" style="width:200px"/>
            </el-form-item>
        </el-col>
    </el-form>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="modifyMachine">确 定</el-button>
    </div>
    </el-dialog>
  </div>
</template>

<script>
import { sprayParameterPage,delSprayParameter,upSprayParameter } from '@/api/weldManager.js'
import {baseURL} from '@/utils/baseURL'
import { getToken } from '@/utils/auth'
export default {
    name: 'sprayParameter',
    data () {
        return {
            baseURL: baseURL,
            listQuery: {
                page: 1,                                    //页码
                limit: 10                                   //每页多少条记录
            },
            param: {
                deviceBarcode: '',                      //工序条码
                jobNumber: '',                           //员工工号
            },
            total: 0,                                      //数据的总数
            tableInfo: [],
            loadingList: false,
            loading: false,
            showfilelist: true,
            fileList: [],
            httpHeader: {
                'Authorization': ''
            },
            userInfo: this.$store.state.user.userInfo,
            uploadTip:'上传到服务器',
            modifyform: {},
            dialogFormVisible: false
        }
    },
    methods: {
        getData(){
          this.listQuery.page = 1
          this.listQuery.limit = 10
          this.handleFilter()
        },
        async handleFilter() {
            this.loadingList = true
            let query = Object.assign({},this.listQuery)
            if(this.param.deviceBarcode){ query.deviceBarcode = this.param.deviceBarcode}
            if(this.param.jobNumber){ query.jobNumber = this.param.jobNumber}
            // query.isSpray = true
            let data = await sprayParameterPage(query)
            let errmsg = data.msg
            if(data.code == '1'){
                this.total = data.data.total
                this.tableInfo = data.data.records
                this.loadingList = false
            } else {
                this.$message({
                    message: errmsg,
                    type: 'warning'
                })
            }
            this.loadingList = false
        },
        handleEdict(row){
            this.modifyform = row
            this.dialogFormVisible = true
        },
        async modifyMachine(){
            let query = Object.assign({},this.modifyform)
            // query.isSpray = true
            let data = await upSprayParameter(query)
            if(data.code == '2') return this.$message.error(data.msg)
            this.dialogFormVisible = false
            this.handleFilter()
            this.$message.success(data.msg)
        },
        handleDelete(index,row) {
            this.$confirm('是否确定删除该行数据?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
            }).then(async () => {
                let res = await delSprayParameter({sprayingParameterId: row.sprayingParameterId})
                if(res.code == '2') return this.$message.error(res.msg)
                this.tableInfo.splice(index, 1)
                this.$message({
                    type: 'success',
                    message: '删除成功'
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
          this.listQuery.limit = val
          this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.handleFilter()
        },
        cancelSubmit(){
            this.param = {
                deviceBarcode: '',                      //工序条码
                jobNumber: '',                           //员工工号
                date: '',                                //日期
            }
            this.listQuery.page = 1
            this.handleFilter()
        },

        setMonth() {
            var date = new Date()
            var year = date.getFullYear()
            var month = this.filterMonth(date.getMonth()+1)
            var day = this.filterMonth(date.getDate())
            return year + '-' + month + '-' + day
        },
        filterMonth(value) {
          if (value<10) {
            return '0' + value
          } else {
            return value
          }
        },
        //初始默认执行(重点)，返回日期格式YYYY-MM-DD HH:MM:SS
        getNowTime() {
          let dateTime = +new Date()+8*3600*1000
          const start = new Date(dateTime - 3600 * 1000 * 24 * 7)
              .toISOString()
              .replace('T', ' ')
              .split('.')[0]
              .substring(0,10) //默认开始时间7天前
          const end = new Date(dateTime)
              .toISOString()
              .replace('T', ' ')
              .split('.')[0]
              .substring(0,10)//默认结束时间当前时间
          console.log([start, end])
          return [start, end]
        },
        // 下载模板表单
        getExcelList() {
            window.open('http://180.76.113.62:8110/image/portrait/example1.rar')
        },
        submitUpload() {
            this.uploadLoading = true
            this.uploadTip = '正在上传中'
            this.showfilelist = false
            // this.httpHeader.Authorization = this.dealCookie(document.cookie)
            this.httpHeader.Authorization = getToken()
            this.$refs.upload.submit()

        },
        handleSuccess(response) {
            console.log(response,'response')
            const result = response.code
            const errMsg = response.msg
            this.uploadLoading = false
            this.showfilelist = true
            this.uploadTip = '上传到服务器'
            this.$refs['upload'].clearFiles()
                if(result == '1'){
                    this.$message({
                    type: 'succes',
                    message: errMsg
                })
                this.handleFilter()
                }else{
                    this.$message({
                    type: 'error',
                    message: errMsg
                })
            }
        },
        handleRemove(file, fileList) {
        console.log(file, fileList);
        },
        handlePreview(file) {
        console.log(file);
        },
    },
    // 进入页面获取table信息
    mounted() {
        this.handleFilter()
    }
}
</script>

<style>

</style>
